<template>
  <div>
    <el-card style="padding: 0">
      <el-tabs type="border-card" style="min-height: 85vh;" v-model="saleType">
        <el-tab-pane name="buy" label="我要买的">
          <el-table :data="ordersList" >
            <!-- 展开行优化 -->
            <el-table-column label="订单编号" align="center" prop="orderNo"/>
            <el-table-column label="商品信息" align="left" width="300">
              <template slot-scope="scope">
                <div class="goods-info">
                  <image-preview
                    :src="scope.row.img"
                    :width="60"
                    :height="60"
                    class="goods-image"
                    style="border-radius: 4px; border: 1px solid #ebeef5;"
                  />
                  <span class="goods-name">{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
<!--            <el-table-column label="金额" align="center" prop="total"/>-->
            <el-table-column label="时间" align="center" prop="time" width="200">
              <template slot-scope="scope">
                <div>下单：{{ scope.row.time }}</div>
                <div v-if="scope.row.payTime">支付：{{ scope.row.payTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-tag type="primary">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="warning"
                  plain
                  v-if="scope.row.status==='待付款'"
                  @click="updateStatus(scope.row,'已付款')"
                  v-hasPermi="['project:orders:remove']"
                >支付
                </el-button>
                <el-button
                  size="mini"
                  type="success"
                  plain
                  v-if="scope.row.status==='已发货'"
                  @click="updateStatus(scope.row,'已完成')"
                  v-hasPermi="['project:orders:edit']"
                >收货
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="sale" label="我出售的">
          <el-table :data="ordersList" >
            <!-- 展开行优化 -->
            <el-table-column label="订单编号" align="center" prop="orderNo"/>
            <el-table-column label="商品信息" align="left" width="300">
              <template slot-scope="scope">
                <div class="goods-info">
                  <image-preview
                    :src="scope.row.img"
                    :width="60"
                    :height="60"
                    class="goods-image"
                    style="border-radius: 4px; border: 1px solid #ebeef5;"
                  />
                  <span class="goods-name">{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
<!--            <el-table-column label="金额" align="center" prop="price"/>-->
            <el-table-column label="下单时间" align="center" prop="time"/>
            <el-table-column label="订单状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-tag type="primary">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  plain
                  v-if="scope.row.status==='已付款'"
                  @click="updateStatus(scope.row,'已发货')"
                  v-hasPermi="['project:orders:edit']"
                >发货
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import {delOrders, listOrders, updateOrders} from "@/api/project/orders";
import {listAddress} from "@/api/project/address";
import user from "@/store/modules/user";

export default {
  name: "Orders",
  computed: {
    userId() {
      return user.state.id
    }
  },
  data() {
    return {
      saleType: 'buy',
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单信息表格数据
      ordersList: [],
      addressList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        img: null,
        orderNo: null,
        price: null,
        time: null,
        payNo: null,
        payTime: null,
        userId: null,
        address: null,
        phone: null,
        userName: null,
        status: null,
        saleId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    listAddress({pageSize: 999}).then(res => this.addressList = res.rows)
  },
  watch: {
    saleType() {
      this.getList()
    }
  },
  methods: {
    updateStatus(row, status) {
      const parse = JSON.parse(JSON.stringify(row));
      let orders = {
        'id': parse.id,
        'status': status
      }
      updateOrders(orders).then(res => {
        this.$modal.msgSuccess("操作成功");
        this.getList()
      })
    },
    /** 查询订单信息列表 */
    getList() {
      if (this.saleType === 'buy') this.queryParams.userId = this.userId
      else this.queryParams.saleId = this.userId
      listOrders(this.queryParams).then(response => {
        this.ordersList = response.rows;
        this.total = response.total;
        this.queryParams.saleId = ''
        this.queryParams.userId = ''
      });
    },
  }
};
</script>
<style scoped>
/* 商品信息样式 */
.goods-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goods-name {
  flex: 1;
  line-height: 1.4;
}
</style>
